<template>
    <div style="width: 100%;">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> Button 按钮</van-divider>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> Icon 图标</van-divider>
        <van-icon name="chat-o" dot color="#1989fa" size="24px" />
        <van-icon name="chat-o" badge="9" color="#07c160" size="24px" />
        <van-icon name="chat-o" badge="99+" size="24px" />

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> Cell 单元格</van-divider>
        <van-cell title="单元格" is-link  label="描述信息" />
        <van-cell title="单元格" is-link value="内容" />
        <van-cell title="单元格" is-link arrow-direction="down" value="内容" />

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> Image 图片</van-divider>
        <van-image
                round
                width="10rem"
                height="10rem"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
        />


    </div>
</template>

<script>
    import {Button, Cell, CellGroup, Divider, Icon, Image as VanImage} from 'vant';

    Vue.use(VanImage);
    Vue.use(Cell);
    Vue.use(CellGroup);
    Vue.use(Divider);
    Vue.use(Icon);
    Vue.use(Button);
    export default {
        props: {
            widgetID: String
        },
        data() {
            return {}
        }
        ,
        methods: {}
        ,
        mounted() {
            let vm = this;
            // The mendix init data to vue
            this.$parent.$on('widget-loaded', data => {
                for (const key in data) {
                    if (data.hasOwnProperty(key)) {
                        const element = data[key];
                        vm[key] = element;
                    }
                }
            });

            // The mendix contextobj is change will call this
            this.$parent.$on("widget-change", data => {

            });
        }
    }
</script>

<style lang="css" scoped>

</style>